<template>
  <dd class="table-tr" :class="{active:showList}">
    <!-- <transition name="fade">
      <div v-if="showList" class="border border-top"></div>
    </transition> -->
    <div class="top clearfix" @click="toggle">
      <section v-if="list.length" class="xiala-box" :class="{active:showList}">
        <i class="iconfont icon-xiala"></i>
      </section>
      <div class="cell">
        <i :class="'icon-' + coin_type"></i>{{coin_type_up}}
      </div>
      <div class="cell">
        <template v-if="shares">
          {{shares}} <span class="unit">{{shares_unit}}{{coinHashUnit}}/s</span>
        </template>
        <template v-else>{{$t('unit.loading')}}</template>
      </div>
      <div class="cell">
        <template v-if="coin_data.suanli">
          {{coinDataSuanLi}} <span class="unit">{{coinDataSuanLiUnit}}{{coinHashUnit}}/s</span>
        </template>
        <template v-else>{{$t('unit.loading')}}</template>
      </div>
      <div class="cell">
        <template v-if="coin_data.money">
          {{coin_data.money}} <span class="unit">CNY/{{coin_data.unit}}</span>
        </template>
        <template v-else>{{$t('unit.loading')}}</template>
      </div>
      <div class="cell">
        <slot />
      </div>
      <div class="cell" @click.stop="()=>{}">
        <a :href="href" target="_blank">
          <!-- <i class="icon-jiaoyu01 iconfont"></i> -->
          <i class="icon-help"></i>
        </a>
      </div>
      <!-- <i v-if="list.length" class="icon-zhankai iconfont"></i> -->
    </div>
    <transition name="fade">
      <div v-if="showList && list.length" class="bottom clearfix" :style="{height:(list.length)*40 + 156 +'px'}">
        <div class="input-box">
          <div class="input-content">
            <label :for="coin_type+'input'">
              <input :id="coin_type+'input'" type="text" v-model="electricCharge">
              <i class="iconfont icon-pen"/>
              <span>{{$t('home.electricCharge')}}</span>
            </label>
          </div>
        </div>
        <dl>
          <dt class="clearfix">
            <div class="cell">{{$t('mill.worker_name')}}</div>
            <div class="cell">{{$t('home.mach_rate')}}</div>
            <div class="cell">{{$t('home.power_k')}}</div>
            <div class="cell">{{$t('home.eleOutcome')}}</div>
            <div class="cell">
              <span @click="initSort">{{$t('home.preOutcome')}}</span>
              <span class="sort">
                <i @click="doSort('my_preOutcome','desc')" v-if="order_by !=='my_preOutcome' || sort !=='desc'" class="iconfont icon-up"></i>
                <i @click="doSort('my_preOutcome','asc')" v-if="order_by !=='my_preOutcome' || sort !=='asc'" class="iconfont icon-down"></i>
              </span>
            </div>
            <div class="cell">
              <span @click="initSort">{{$t('home.preIncome')}}</span>
              <span class="sort">
                <i @click="doSort('my_preIncome','desc')" v-if="order_by !=='my_preIncome' || sort !=='desc'" class="iconfont icon-up"></i>
                <i @click="doSort('my_preIncome','asc')" v-if="order_by !=='my_preIncome' || sort !=='asc'" class="iconfont icon-down"></i>
              </span>
            </div>
            <div class="cell">
              <span @click="initSort">{{$t('home.pureIncome')}}</span>
              <span class="sort">
                <i @click="doSort('my_pureIncome','desc')" v-if="order_by !=='my_pureIncome' || sort !=='desc'" class="iconfont icon-up"></i>
                <i @click="doSort('my_pureIncome','asc')" v-if="order_by !=='my_pureIncome' || sort !=='asc'" class="iconfont icon-down"></i>
              </span>
            </div>
            <div class="cell">
              <span @click="initSort">{{$t('home.closePrice')}}</span>
              <span class="sort">
                <i @click="doSort('closePrice','desc')" v-if="order_by !=='closePrice' || sort !=='desc'" class="iconfont icon-up"></i>
                <i @click="doSort('closePrice','asc')" v-if="order_by !=='closePrice' || sort !=='asc'" class="iconfont icon-down"></i>
              </span>
            </div>
          </dt>
          <dd class="clearfix" v-for="(v,i) in sortList" :key="i">
            <div class="cell">{{language === 'zh' ? v.miner_name : v.miner_name_en}}</div>
            <div class="cell">{{v.hash}} {{v.hash_unit}}{{coinHashUnit}}/s</div>
            <div class="cell">{{v.my_power_k}} KW</div>
            <div class="cell">¥
              <cu class="val" :val="v.my_eleOutcome | num" :decimals="2" />
            </div>
            <div class="cell">{{`${v.my_preOutcome.toFixed(8)} ${v.coin_type.toUpperCase()}`}}</div>
            <div class="cell">¥ {{v.my_preIncome}}</div>

            <div class="cell">¥
              <cu class="val" :val="v.my_pureIncome | num" :decimals="2" />
            </div>
            <div class="cell">¥
              <cu class="val" :val="v.closePrice | num" :decimals="2" />
            </div>
          </dd>
        </dl>
      </div>
    </transition>
    <!-- <transition name="fade">
      <div v-if="showList" class="border border-bottom"></div>
    </transition> -->
  </dd>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import { poolMainMiner } from '@/api';
import cu from '@/components/CountUp';

export default {
  props: {
    coin_data: {
      type: Object,
      default() {
        return { suanli: '', money: '', unit: '' };
      },
    },
    coin_type: {
      type: String,
    },
    href: {
      type: String,
    },
    shares: {
      type: String,
    },
    shares_unit: {
      type: String,
    },
  },
  components: {
    cu,
  },
  data() {
    return {
      order_by: 'my_pureIncome',
      sort: 'desc',
      electricCharge: 0.4,
      list: [],
      sortList: [],
      unit: {
        H: 1,
        HH: 1,
        KH: 10 ** 3,
        MH: 10 ** 6,
        GH: 10 ** 9,
        TH: 10 ** 12,
        PH: 10 ** 15,
      },
    };
  },
  computed: {
    ...mapGetters(['ativeHomeTable', 'language']),
    showList() {
      return this.coin_type === this.ativeHomeTable;
    },
    coin_type_up() {
      return this.coin_type.toUpperCase();
    },
    coinTypeScale() {
      if (this.coin_type === 'eth') {
        return 10 ** 9;
      }
      return 10 ** 8;
    },
    coinDataSuanLi() {
      return this.coin_data.suanli ? this.coin_data.suanli.split(' ')[0] : 0;
    },
    coinDataSuanLiUnit() {
      return this.coin_data.suanli ? this.coin_data.suanli.split(' ')[1] : '';
    },
    coinHashUnit() {
      return this.coin_type === 'zec' ? 'Sol' : 'H';
    },
  },
  created() {
    this.getPoolMainMiner();
  },
  methods: {
    ...mapMutations(['SET_ACTIVE_HOMETABLE']),
    compare(orderBy, sort) {
      return (obj1, obj2) => {
        const value1 = obj1[orderBy];
        const value2 = obj2[orderBy];
        if (sort === 'asc') {
          return value1 - value2; // 升序
        }
        return value2 - value1; // 降序
      };
    },
    doSort(orderBy, sort) {
      this.order_by = orderBy;
      this.sort = sort;
      this.sortList.sort(this.compare(this.order_by, this.sort));
    },
    initSort() {
      this.order_by = '';
      this.sort = '';
      this.sortList = this.mapList(this.list);
    },
    toggle() {
      if (!this.list.length) {
        return;
      }
      this.SET_ACTIVE_HOMETABLE(this.showList ? '' : this.coin_type);
    },
    computeHash(value, unit) {
      // 计算币种需要的哈希
      return (value * this.unit[unit]) / this.unit.PH;
    },
    getPoolMainMiner() {
      poolMainMiner({ coin_type: this.coin_type })
        .then((res) => {
          if (res.data.status === 1) {
            this.list = res.data.data;
            this.sortList = this.mapList(this.list).sort(this.compare(this.order_by, this.sort));
          }
        })
        .catch(() => {});
    },
    mapList(arry) {
      const floatElectricCharge = parseFloat(this.electricCharge) || 0;
      return arry.map((v) => {
        const obj = JSON.parse(JSON.stringify(v));
        // 矿机功率
        obj.my_power_k = v.power / 1000;
        // 单台日产出
        obj.my_preOutcome =
          ((v.income_24 /
          this.coinTypeScale) /
          this.unit[`${v.income_24_unit}H`]) *
          v.hash *
          this.unit[`${v.hash_unit}H`];
        obj.my_preIncome = (v.price * obj.my_preOutcome).toFixed(2);
        // 电费支出
        obj.my_eleOutcome =
          parseFloat(obj.my_power_k) * floatElectricCharge * 24;
        // 净利润
        obj.my_pureIncome = obj.my_preIncome - obj.my_eleOutcome;
        // 关机币价
        obj.closePrice = obj.my_eleOutcome / obj.my_preOutcome;
        return obj;
      });
    },
  },
  watch: {
    electricCharge(v) {
      const str = v.toString();
      // 第一个'.'的位置
      const firstPoint = str.indexOf('.');
      // 第二个'.'的位置
      const secondPoint = str.indexOf('.', firstPoint + 1);
      // slice位置
      let slicePosition;
      if (firstPoint === -1) {
        slicePosition = str.length;
      } else if (secondPoint === -1 || secondPoint - firstPoint > 2) {
        slicePosition = firstPoint + 3;
      } else {
        slicePosition = secondPoint;
      }
      let res = str.slice(0, slicePosition).replace(/[^\d.]/g, '');
      if (res >= 9.99) {
        res = 9.99;
      }
      this.electricCharge = res;
      this.sortList = this.mapList(this.list);
    },
  },
};
</script>
<style lang="scss" scoped>
.table-tr {
  position: relative;
  border-top: solid 1px #ececec;
  &:first-of-type{
    border-top: none;
  }
  &.active{
    &:first-of-type{
      border-top: none;
      box-shadow:none;
    }
    box-shadow: 0px -4px 20px #f6faf9;
  }
  .top {
    position: relative;
    cursor: pointer;
    .xiala-box{
      width: 24px;
      height: 24px;
      border-radius: 12px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 27px;
      font-size: 14px;
      line-height: 24px;
      color: #acacac;
      text-align: center;
      &.active{
        background-color: #1dd3ad;
        color: #fff;
        transform: translateY(-50%) rotate(180deg);
      }
    }
    &:hover{
      background-color: rgba($color: #1dd3ad, $alpha: 0.04);
    }
    .cell {
      height: 94px;
      color: #4b4b4b;
      line-height: 94px;
      font-size: 18px;
      .unit{
        color: #939393;
      }
      .icon-help {
        width: 21px;
        height: 33px;
        display: inline-block;
        background: url(../../../../../assets/images/home/table-help.png) no-repeat center;
        vertical-align: sub;
      }
    }
    .cell:first-of-type i {
      width: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: sub;
      margin-left: -34px;
      margin-right: 10px;
      background-size: auto 100%;
      background-position: center;
      background-repeat:  no-repeat;
      @each $coinType in btc,bch,bsv,eth,dcr,etp,zec{
        &.icon-#{$coinType}{
          background-image: url(../../../../../assets/images/home/icon-#{$coinType}.png)
        }
      }
      &.icon-btc {
        background-size: 15px 20px;
      }
      &.icon-eth {
        background-size: 17px 22px;
      }
    }
  }
  .bottom {
    overflow: hidden;
    &.fade-enter-active,
    &.fade-leave-active {
      transition: all 0.3s;
    }
    &.fade-enter,
    &.fade-leave-to {
      opacity: 0;
      height: 0 !important;
    }
    .input-box {
      height: 60px;
      padding: 0 80px;
      .input-content{
        border-top: solid 1px #ececec;
        padding: 15px 0;
        label {
          position: relative;
          input {
            width: 84px;
            height: 30px;
            border-radius: 6px;
            border: solid 1px #1dd3ad;
            outline: none;
            background-color: #fff;
            font-size: 14px;
            padding: 0 32px 0 10px;
          }
          .icon-pen{
            position: absolute;
            top: 50%;
            left: 62px;
            transform: translateY(-50%);
            color: #1dd3ad;
          }
          span {
            font-size: 14px;
            color: #333;
          }
        }
      }
    }
    dl {
      border-top: #1dd3ad 1px solid;
      border-bottom: #1dd3ad 1px solid;
      background-color: #f6fdfc;
      padding-bottom: 20px;
      .cell {
        font-size: 14px;
        white-space: nowrap;
        &:nth-of-type(1) {
          width: 180px;
          min-height: 1px;
          padding-left: 50px;
          padding-right: 0;
          text-align: left;
        }
        &:nth-of-type(2) {
          width: 130px;
        }
        &:nth-of-type(3) {
          width: 130px;
        }
        &:nth-of-type(4) {
          width: 145px;
        }
        &:nth-of-type(5) {
          width: 155px;
        }
        &:nth-of-type(6) {
          width: 140px;
          padding-right: 0;
        }
        &:nth-of-type(7) {
          width: 105px;
        }
        &:nth-of-type(8) {
          width: 175px;
          padding-right: 20px;
        }
      }
      dt {
        background-color: #e8f4f6;
        margin-bottom: 20px;
        .cell {
          color: #0095ff;
          height: 54px;
          line-height: 54px;
          // &.en{
          //   padding: 6px 0;
          //   line-height: 21px;
          // }
          span:first-of-type{
            vertical-align: top;
            cursor: pointer;
          }
          .sort{
            display: inline-block;
            position: relative;
            margin-top: 16px;
            height: 22px;
            .iconfont{
              position: absolute;
              line-height: 14px;
              left: 0;
              cursor: pointer;
              &.icon-up{
                top: 0;
              }
              &.icon-down{
                bottom: 0;
              }
            }
          }
        }
      }
      dd{
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>

